<template id='ApplicationDetail'>
  <div class="ApplicationDetail">
    <top-bar :isClick="isClick" />
    <div class="main">
      <div
        class="cover"
        v-if="responseData.cover_img"
        :style="{ backgroundImage: `url(${responseData.cover_img})` }"
      ></div>
      <div class="leftPath">
        <div class="leftContent">
          <div class="back" @click="goBack"></div>
          <div
            class="logo"
            :style="{ visibility: responseData.logo ? 'visible' : 'hidden' }"
          >
            <b-img :src="responseData.logo" fluid></b-img>
          </div>
          <div class="picture">
            <b-img :src="responseData.cover_img" fluid></b-img>
          </div>
        </div>
      </div>
      <div class="rightPath">
        <div class="rightContent">
          <!-- <div class="title">{{ locationData.title }}</div> -->
          <div class="name">{{ responseData.title }}</div>
          <div class="desc" v-html="responseData.desc"></div>
          <!-- <div class="price">
            <div class="priceTilte">{{ locationData.priceTilte }}</div>
            <div class="priceValue">{{ responseData.priceValue }}</div>
          </div> -->
          <div class="link" v-if="responseData.url">
            <div class="linkTitle">{{ locationData.linkTitle }}</div>
            <div class="linkWeb" @click="linkTo">
              {{ responseData.url }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
import { getGameDetailApi } from "../../assets/api/index";
import { iscode } from "../../tools/index";
export default {
  name: "ApplicationDetail",
  components: {
    BottomBar,
    TopBar,
  },
  data() {
    return {
      id: "",
      isClick: 3,
      locationData: {
        priceTilte: "PRICE REALIZED:",
        linkTitle: "CONTRACT ADDRESS:",
        title: "Pablo Ruiz Picasso",
      },
      responseData: {},
    };
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    linkTo() {
      if (this.responseData.url) {
        window.location.href = this.responseData.url;
      }
    },
    async getGameDetail() {
      let result = await getGameDetailApi({
        id: this.id,
      });
      if (iscode(result)) {
        this.responseData = result.data;
        this.responseData.desc.replace("\n", "</br>");
      }
    },
  },
  created() {
    this.id = this.$route.query.id;
  },
  mounted() {
    this.getGameDetail();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.ApplicationDetail {
  background-color: #000;
  user-select: none;
  padding-top: 128px;
  // height: 100%;
  .main {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1081px;
    position: relative;
    .cover {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: 100% 100%;
      opacity: 0.54;
    }
    .leftPath {
      position: relative;
      top: 0;
      left: 0;
      width: 1089px;
      height: 100%;
      .leftContent {
        padding-left: 244px;
        padding-right: 83px;
        .back {
          cursor: pointer;
          margin-top: 104px;
          width: 72px;
          height: 72px;
          background: url("../../assets/images/application/back.jpg");
          background-size: 100% 100%;
          z-index: 5;
        }
        .logo {
          width: 696px;
          height: 178px;
          border-radius: 9px;
          margin: 29px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          // background-color: #000;
          img {
            width: 696px;
            height: 178px;
          }
        }
        .picture {
          width: 696px;
          height: 527px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 696px;
            height: 527px;
          }
        }
      }
    }

    .rightPath {
      position: relative;
      top: 0;
      right: 0;
      width: calc(100% - 1089px);
      height: 100%;
      background: #000000;
      box-shadow: -120px 20px 83px rgba(0, 0, 0, 0.95);
      z-index: 1;
      padding-left: 50px;
      .rightContent {
        margin-top: 205px;
        width: 100%;
        padding-right: 244px;
        .title {
          margin-top: 205px;
          margin-bottom: 35px;
          font-size: 20px;
          font-weight: 800;
          color: #ffffff;
        }
        .name {
          font-size: 52px;
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 33px;
        }
        .desc {
          font-size: 26px;
          font-weight: 300;
          color: rgba(255, 255, 255, 0.5);
          margin-bottom: 48px;
        }
        .price {
          .priceTilte {
            font-weight: 800;
            font-size: 20px;
            color: rgba(255, 255, 255, 0.5);
          }
          .priceValue {
            font-size: 30px;
            font-weight: 800;
            color: #ffffff;
          }
        }
        .link {
          .linkTitle {
            font-weight: 800;
            font-size: 20px;
            color: rgba(255, 255, 255, 0.5);
          }
          .linkWeb {
            cursor: pointer;
            font-size: 20px;
            font-weight: 500;
            color: #ffffff;
            text-decoration: underline;
          }
          .linkWeb:hover {
            color: #438dee;
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .ApplicationDetail {
    .cover {
      height: 700px;
    }
    .main {
      flex-direction: column;
      height: auto;
      .leftPath {
        width: 100%;
        position: inherit;
        height: 700px;
        .leftContent {
          padding: 0 40px;
          .back {
            position: absolute;
            top: 29px;
            left: 40px;
            margin-top: 0px;
          }
          .logo {
            width: 100%;

            margin: 29px auto;
            img {
              width: 580px;
              height: 148px;
            }
          }
          .picture {
            width: 100%;
            height: 376px;
            img {
              width: 580px;
              height: 376px;
            }
          }
        }
      }
      .rightPath {
        position: inherit;
        width: 100%;
        padding: 0 40px;
        box-shadow: 0px -30px 83px rgba(0, 0, 0, 0.95);
        .rightContent {
          margin-bottom: 20px;
          .title {
            margin-top: 50px;
          }
        }
      }
    }
  }
}
</style>